<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Tutorial 11 - Desktop Apps and States (1)</title>
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
	<a href="tutorials/Mobile_User_Interfaces.html">Previous</a> / <a href="tutorials/App_States_Part_2.html">Next</a>
    </td></tr>
</table>

<h1>Tutorial 11 - Desktop Apps and States (1)</h1>

<div class='note'>
	When going through Maqetta's tutorials, it is suggested that you have two side-by-side
	browser windows open, one showing the tutorial, and the other where you run the application
	and perform the steps listed in the tutorial.<br/>
	<img src='img/SideBySideTutorialsApp.png' class='side_by_side'/>
</div>

<p class="comment">In this exercise we will create a mock-up of a Task Manager, with three "states" as shown below:</p>
<p><img src="img/browser1.png" height="220px"/><img src="img/browser2.png" height="220px" /><img src="img/browser3.png" height="220px" /></p>

<p class="comment">A completed version of the Task Manager mock-up is provided in Sample1.html, located in the <b>Files</b> palette. Preview the mock-up as follows:</p>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open Sample1.html from the <b>Files</b> palette (found in the "samples" folder).</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the page editor toolbar, click the <b>Preview in Browser</b> <img class="inline" src="img/preview-browser.png" /> icon. This will launch a new browser window that contains the HTML page you just created.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <img class="inline" src="img/new_button.jpg" height="18px" /> button. The Add Task dialog should appear.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <img class="inline" src="img/add_button.jpg" height="21px" /> button. The task list should appear.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Close the preview window to return to the Maqetta page editor.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Close Sample1.html</li>
</ol>
<p></p>

<p class="comment">In this exercise we will mock up the content for each of the three "states" on the Task Manager.
In the next exercise we will add interactivity by defining the states, and then wiring the states to onclick events.</p>

<h3>Create a Tab Container</h3>

<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Issue a <b>Create > Desktop Application...</b> on the Maqetta menubar to bring up the Create dialog, 
	then click on the Create button.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the <b>Palette</b>, open <b>Containers</b> and drag a <b>Tab Container</b> onto the canvas.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	The Tab Container's data entry popup will pop up with the default tab titles "Tab 1, Tab 2".</li>
<div class="image">
<a href="img/TabContainer1.png" target="_blank"><img alt="image" src="img/TabContainer1.png" style="margin: 1em 1em 0pt 0pt;" height="200px" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Change the text in the data entry popup to:

<div class="image">
<a href="img/TabContainer1a.png" target="_blank"><img alt="image" src="img/TabContainer1a.png" style="margin: 1em 1em 0pt 0pt;" height="115px" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />

then click on the OK button, hit <b>Enter</b> or click outside the edit box to close the popup.<br /><br /></li>


<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	You should now see a Tab Container with three tabs:</li>

<div class="image">
<a href="img/TabContainer2.png" target="_blank"><img alt="image" src="img/TabContainer2.png" style="margin: 1em 1em 0pt 0pt;" height="200px" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Layout</b> palette, found on the right side of the application.
    <ul>
	<li>Set <b>width: 300px</b></li>
	<li>Set <b>height: 250px</b></li>
    </ul><br /></li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>Save</b> <img class="inline" src="img/save_icon.png" /> icon on the page editor toolbar to save your changes.</li>
</ol>

<h3>Create the New and Delete buttons</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Widgets palette, close <b>Containers</b> and open <b>HTML</b> section and <b>Common</b> sub-section.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>&lt;div&gt;</b> from the Widgets palette onto the Tab Container.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Close the <b>HTML</b> section and open the <b>Controls</b> section and <b>Buttons</b> sub-section.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>Button</b> from the Widgets palette onto the &lt;div&gt; you just created.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Enter "<b>New</b>" in the data entry popup.</li>
<br /><img src="img/button1.png" /></li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag another <b>Button</b> from the Widget palette into the &lt;div&gt;, next to the <b>New</b> button.</li> 
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Enter "<b>Del</b>" in the data entry popup.</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the white space to the side of the 2 Buttons. This will select the <b>&lt;div&gt;</b> that contains the Buttons.
<br /><img src="img/buttons2.png" /></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Fonts/Text</b> palette.
</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Set <b>text-align: right</b>. This will shift the Buttons to the right side of the &lt;div&gt;.
<div class="image">
<a href="img/right-justify.png" target="_blank"><img alt="image" src="img/right-justify.png" style="margin: 1em 1em 0pt 0pt;" width="175px" /></a>	
<img src="img/buttons3.png" style="padding-left:15px;" />
<div>Click on the image to enlarge it.</div>
</div><br />
</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>Save</b> button on the toolbar to save your changes.</li>
</ol>

<h3>Create the Sort-by row</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag another <b>&lt;div&gt;</b> (in <b>HTML</b> section and <b>Common</b> sub-section) onto the Tab Container and drop it into the area below the buttons.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	With the <b>&lt;div&gt;</b> still selected:
	<ol>
	<li>Open the <b>Padding</b> palette.
	In the <b>Padding</b> palette, click on the "show t/r/b/l:" check box.</li>
	<li>Set the padding to <b>padding-top: 10px</b> and <b>padding-bottom: 10px</b>. (<i>Hit <b>Enter</b> or click outside of each input field to apply the changes.</i>)
	<div class="image">
	<a href="img/padding.png" target="_blank"><img alt="image" src="img/padding.png" style="margin: 1em 1em 0pt 0pt;" width="225px" /></a>
	<div>Click on the image to enlarge it.</div>
	</div><br />
	</ol>
</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <strong>&lt;label&gt;</strong> (in <b>HTML</b> section and <b>Common</b> sub-section) onto the &lt;div&gt; you just created.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Enter "<b>Sort-by:</b>" in the data entry popup.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <strong>ComboBox</strong> (in <b>Controls</b> section and <b>TextBox</b> sub-section) 
	onto the &lt;div&gt;, to the right of <b>Sort-by:</b></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the data entry popup, enter values below (hit <b>Enter</b> to create a new line):

<div class="image">
<a href="img/combobox.png" target="_blank"><img alt="image" src="img/combobox.png" style="margin: 1em 1em 0pt 0pt;" width="175px" /></a>	
<div>Click on the image to enlarge it.</div>
</div><br />
      
then click on the OK button or click outside the edit box to close the popup.<br />
<i>Note: The "<b>+</b>" indicates the default selection.</i><br /><br /></li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	With the <b>ComboBox</b> still selected:
	<ol>
	<li>Place your mouse over the <b>resize knob</b> on the right side of the ComboBox and drag the knob to the left, making the ComboBox smaller.</li>
    <li>Open the <b>Margins</b> palette.
	<li>Click on the "show t/r/b/l:" check box under <b>(margin)</b>.</li>
    <li>Set the margin to <b>margin-left: 5px</b>.</li>
	</ol>
</li>
<p><img src="img/sort-by.png"/></p>
</ol>

<h3>Create the Task List</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>Multi Select</b> (found in <b>Controls</b> section, <b>Select</b> sub-section)
	onto the Tab Container and drop it in the empty space below the last &lt;div&gt;.
<br /><img src="img/multiselect.png"/></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the widget's data entry popup, change the values to:

<p><img src="img/multiselect2.png"/></p><br />

then click on the OK button or click outside the edit box to close the popup.<br />
<i>Note: After you close the data entry popup, you can re-open it by double-clicking on the widget.</i><br /><br /></li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <strong>Save</strong> button on the toolbar to save your changes.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click the <b>Preview in Browser</b> icon <img class="inline" src="img/preview-browser.png" /> (in the toolbar) to see your how your page looks so far. This will launch a new browser window that contains the HTML page you just created. Your Tab Container widget should look like this:
<p><img src="img/TabContainerPreview.png"/></p></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Close the preview window to return to Maqetta.</li>
</ol>

<h3>Create the New Task dialog's frame</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>Content Pane</b> (in <b>Containers</b> section and <b>Dojo</b> sub-section) onto the canvas below the Tab Container.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i><b>Keep the Content Pane selected for the remainder of this section.</b></i></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Border</b> palette:
      <div style="margin-bottom: 15px">
          <div>
			  <ol>
   			  <li>Set <b>show: props</b></li>
        	  <li>Set <b>border-width: 1px</b></li>
              <li>Set <b>border-style: solid</b></li>
              <li>Set <b>border-color: blue</b>
              	<p class="note">Maqetta offers multiple options for specifying a color.
              		Color properties offer a drop-down menu that allows easy selection of common colors
              		such as black, white, red, green and blue. You can bring up a color picker dialog
              		either by selecting "Choose color..." from the menu or clicking on the color swatch rectangle
              		to the right of the property value. You can also type in a CSS color specification
              		into the type-in area, such as a color name (e.g., "purple") or a CSS color hex value
              		(e.g., "#FE8834").</p>
              </li>
              </ol>
          </div>
      </div>
</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	On the canvas, resize the Content Pane to roughly 350px wide by 75px tall (<i>using the bottom-right-corner resize knob</i>).</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>Note how the width and height values change in the <b>Layout</b> palette after you resize.</i>
<p><img src="img/layout.png"  height="120px"/></p>
</li>
</ol>

<h3>Add content to the Add Task dialog</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag a <b>&lt;div&gt;</b> (in <b>HTML</b> section and <b>Common</b> sub-section) into the ContentPane you just created.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Double-click on the div to bring up the data entry popup.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the data entry popup enter "<b>Add new task</b>".</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Fonts/Text</b> palette:
      <div style="margin-bottom: 15px">
          <div class="left-side">
			  <ol>
				<li>Set <b>font-weight: bold</b>.</li>
				<li>Set <b>text-align: center</b>.</li>
              </ol>
          </div>
          <div class="image">
<a href="img/right-justify.png" target="_blank"><img alt="image" src="img/dialog-font.png" style="margin: 1em 1em 0pt 15px;" height="200px" /></a>	
          </div>
      </div>
</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Padding</b> palette:
      <div style="margin-bottom: 15px">
          <div class="left-side">
			  <ol>
				<li>Click the "show t/r/b/l:" check box under <b>(padding)</b>.</li>
				<li>Set <b>padding-top: 6px</b>.</li>
				<li>Set <b>padding-bottom: 6px</b></li>
              </ol>
          </div>
          <div class="image">
<a href="img/right-justify.png" target="_blank"><img alt="image" src="img/padding2.png" style="margin: 1em 1em 0pt 15px;" height="175px" /></a>	
          </div>
      </div>
</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag another <b>&lt;div&gt;</b> (in <b>HTML</b> section and <b>Common</b> sub-section) onto the Content Pane, below the first &lt;div&gt;.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	With the new &lt;div&gt; still selected:<ol>
	<li>Drag a <b>&lt;label&gt;</b> (in <b>HTML</b> section and <b>Common</b> sub-section) onto the selected &lt;div&gt;.</li>
	<li>In the data entry popup enter "<b>Task name:</b>".</li>
	<li>Drag a <b>TextBox</b> (in <b>Controls</b> section and <b>TextBox</b> sub-section) onto the &lt;div&gt;, to the right of "Task name:".</li>
	<li>Drag a <b>Button</b> (in <b>Controls</b> section and <b>Button</b> sub-section) onto the &lt;div&gt;, to the right of the TextBox.</li>
	<li>In the data entry popup enter "<b>Add</b>".</li>
</ol></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <strong>Save</strong> button on the toolbar to save your changes.</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Select the Content Pane either by clicking on its border or clicking on white space within the Content Pane that has no widgets covering that area.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Layout</b> palette and set <b>position: absolute</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Drag the Content Pane over the Tab Container, placing the top of the ContentPane just below the <b>New</b> button:
      <div style="margin-bottom: 15px">
          <div>
			  <ol>
   			  <li>Place the mouse on the top border of the Content Pane, between the resize knobs.</li>
              <li>Drag the Content Pane up using the mouse.</li>
              </ol>
          </div>
      </div><br />
</li>

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Open the <b>Background</b> palette</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Set the <b>background-color</b> to white choosing white from from the property's drop-down menu.
 </li>
<div class="image">
<p><a href="img/add-new-task.png" target="_blank"><img alt="image" src="img/add-new-task.png" style="margin: 1em 1em 0pt 0pt;" height="160px" /></a></p>
</div
><br />

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <strong>Save</strong> button on the toolbar to save your changes.</li>
</ol>

<p class="prevnext"><a href="tutorials/Mobile_User_Interfaces.html">Previous</a> / <a href="tutorials/App_States_Part_2.html">Next</a></p>

</div> <!-- pagebody -->

</body>
</html>